<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于 flex 弹性布局实现"头尾固定，中间滚动"的页面（纯 CSS 实现）</title>
    <style>
        /*
        清除手机的一些基本样式
        */
        html{
            width: 100%;
            height: 100%;
            font-size: 62.5%;
            -webkit-font-smoothing: antialiased;
        }
        body{
            width: 100%;
            height: 100%;
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
            text-align: center;
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        i, em, b{
            font-style: normal;
            font-weight: normal;
        }
        :-moz-placeholder{
            color: #ccc;
        }
        ::-moz-placeholder{
            color: #ccc;
        }
        ::-webkit-textarea-placeholder{
            color: #ccc;
        }
        :-mx-textarea-placeholder{
            color: #ccc;
        }
        img{
            width: 100%;
            vertical-align: top;
        }
        input, textarea, select{
            border: 0;
            outline: none;
            background: transparent;
            font-size: 1.2rem;
            -webkit-appearance: none;
            font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
        }
        input, a, span{
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        /*
        flex 最外框
        */
        .page{
            display: -webkit-box;
            height: 100%;
            -webkit-box-orient: vertical;
        }
        /*
        flex 内容区
        */
        .page .content{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            position: relative;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            background-color: #ccc;
        }
        /*
        flex 头部
        */
        .header{
            display: -webkit-box;
        }
        .header *{
            display: block;
        }
        /*
        flex 底部，按钮平均分布
        */
        .footer{
            overflow: hidden;
            background-color: #fff;
        }
        .footer-nav{
            display: -webkit-box;
            height: 2rem;
            line-height: 2rem;
        }
        .footer-nav *{
            display: block;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }
    </style>
</head>
<body>
<section class="page">
    <header class="header">我是头部</header>
    <section class="content">
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
        <div>可滚动内容</div>
    </section>
    <footer class="footer">
        <nav class="footer-nav">
            <b>首页</b>
            <b>其他</b>
            <b>中心</b>
        </nav>
    </footer>
</section>
</body>
</html>
